<template>
    <view :data-theme="globPrimary">
        <u-navbar title="更换手机号"></u-navbar>
        <view class="modify-phone" v-if="original == 1">
            <view class="item-col u-border-bottom">
                <view class="label">手机号</view>
                <view class="text">{{ userInfo.phone | formatMask }}</view>
            </view>
            <u-field v-model="code" label="验证码" placeholder="请填写验证码">
                <edu-button
                    slot="right"
                    type="text"
                    :disabled="disabled"
                    @click="handleGetCode(userInfo.phone)"
                    >{{ codeTips }}</edu-button
                >
            </u-field>
            <edu-button
                type="primary"
                @click="next"
                :disabled="codeDisabled"
                :custom-style="customStyle"
                >下一步</edu-button
            >
        </view>

        <view class="modify-phone" v-else-if="original == 0">
            <u-field
                v-model="phone"
                label="手机号"
                placeholder="请输入要绑定的新手机号"
            ></u-field>
            <u-field v-model="code" label="验证码" placeholder="请填写验证码">
                <edu-button
                    slot="right"
                    type="text"
                    :disabled="disabled || codeBtnDisabled"
                    @click="handleGetCode(phone)"
                    >{{ codeTips }}</edu-button
                >
            </u-field>
            <edu-button
                type="primary"
                class="btn"
                @click="confirm"
                :disabled="codeDisabled || codeBtnDisabled"
                :custom-style="customStyle"
                >确认验证</edu-button
            >
        </view>
        <u-verification-code
            seconds="60"
            ref="uCode"
            @change="codeChange"
            @end="codeEnd"
            @start="codeStart"
        ></u-verification-code>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            phone: "",
            original: 1,
            code: "",
            codeTips: "",
            disabled: false,
            customStyle: {
                marginTop: "170rpx",
            },
        };
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
            userInfo: "user/getUserInfo",
        }),
        codeBtnDisabled() {
            return !this.$u.test.mobile(this.phone);
        },
        codeDisabled() {
            return this.$u.test.empty(this.code);
        },
    },
    methods: {
        next() {
            this.$edu.api
                .createAccountPhone({
                    phone: this.userInfo.phone,
                    verify: this.code,
                    original: this.original,
                })
                .then((res) => {
                    if (res?.data) {
                        this.original = 0;
                        this.code = "";
                        this.disabled = false;
                        this.$refs.uCode.reset();
                        this.codeTips = "获取验证码";
                    }
                })
                .catch((res) => {
                    this.$u.toast(res.msg);
                });
        },
        confirm() {
            this.$edu.api
                .createAccountPhone({
                    phone: this.phone,
                    verify: this.code,
                    original: this.original,
                })
                .then((res) => {
                    const { data } = res;
                    this.$u.route({
                        type: "redirectTo",
                        url: "/pageUser/setting/userInfo",
                        params: {
                            phone: data,
                        },
                    });
                })
                .catch((res) => {
                    this.$u.toast(res.msg);
                });
        },
        // 获取验证码
        handleGetCode(phone) {
            if (this.$refs.uCode.canGetCode) {
                this.$edu.api
                    .createVerify({ phone: phone, type: "phone" })
                    .then((res) => {
                        const { msg } = res;
                        this.$u.toast(msg);
                        this.$refs.uCode.start();
                    })
                    .catch((res) => {
                        this.$u.toast(res.msg);
                    });
            }
        },
        // 倒计时
        codeChange(text) {
            this.codeTips = text;
        },
        // 倒计时开始
        codeStart() {
            this.disabled = true;
        },
        // 倒计时结束
        codeEnd() {
            this.disabled = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.modify-phone {
    min-height: calc(100vh - 44px);
    background-color: #ffffff;
    padding: 30rpx 30rpx 0;
    .item-col {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        font-size: 14px;
        color: $edu-main-color;
        min-height: 90rpx;
        .label {
            width: 130rpx;
        }
        .text {
            margin-left: 10rpx;
        }
    }
}
</style>
